<template>
    <div>
        <div class="contentboxset">
            <div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>作业</el-breadcrumb-item>
                <el-breadcrumb-item to="/gradescoreindex">成绩管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{isClassActive?'班级报告':'学生报告'}}</el-breadcrumb-item>
            </el-breadcrumb>
            </div>
        </div>
        <div class="titleContent" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
            <h3>{{examtitle}}</h3>
            <div class="classroprtnav">
                <router-link :to="{
                    path: '/classreport',
                    query: {
                    examId: $route.query.examId,
                    title: $route.query.title,
                    subjectId: $route.query.subjectId,
                    classId:$route.query.classId,
                    gradeId:$route.query.gradeid,
                    omsclassId:$route.query.omsclassId,
                    classname:$route.query.classname
                    }
                }" 
                :class="[{ hover: isClassActive }]"
                >班级报告</router-link>
                <router-link :to="{
                    path: '/studentreport',
                    query: {
                    examId: $route.query.examId,
                    title: $route.query.title,
                    classId:$route.query.classId,
                    subjectId: $route.query.subjectId,
                    gradeId:$route.query.gradeid,
                    omsclassId:$route.query.omsclassId,
                    classname:$route.query.classname
                    }
                }" 
                :class="[{ hover: isStudentActive }]">学生报告</router-link>
                <!-- <el-dropdown trigger="click"  @command="classreport">
                    <span class="el-dropdown-link">
                        {{className}}-报告<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in classlistbox" :key="item.classId" :command="item.classId">{{item.gradeName}}{{item.className}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click"  @command="studentreport">
                    <span class="el-dropdown-link">
                        学生报告<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in classlistbox" :key="item.classId" :command="item.classId">{{item.gradeName}}{{item.className}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>  -->
            </div>
        </div>
    </div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import { mapGetters } from 'vuex';
export default {
    props:['examtitle','classlistbox','className'],
    data(){
        return{
            reportlist:'班级报告',
        }
    },
    watch: {
        classlistbox: {
            handler(newValue, oldValue) {
                // 处理变化的逻辑
                this.className =
                (newValue && newValue[0] && newValue[0].gradeName || '') +
                (newValue && newValue[0] && newValue[0].className || '');
            },
            deep: true,        // 深度观察对象内部值的变化
            immediate: true    // 立即以当前值触发回调
        }
    },
    computed: {
        ...mapGetters(['getScreenWidth']),
            screenWidth() {
            return this.getScreenWidth;
        },
        examId ()   { return this.$route.query.examId },
        title ()    { return this.$route.query.title },
        subjectId () { return this.$route.query.subjectid },
        classId () { return this.$route.query.classId },
        gradeId () { return this.$route.query.gradeid },
        omsclassId(){return this.$route.query.omsclassId},
        classname(){return this.$route.query.classname},
        isClassActive () {
        return this.$route.path === '/classreport'
        },
        isStudentActive () {
        return this.$route.path === '/studentreport'
        }
    },
    components: { navTop },
    methods:{
    }
}
</script>

<style scoped>
.contentboxset {
  height: 32px;
  border-top: solid 2px #F4F7FD;
  background:#fff;
}

.breadBox {
  width: 1440px;
  margin: 0 auto;
  min-width: 1200px;
  line-height: 32px;
}

.el-breadcrumb {
  width: auto;
  margin: 0 auto;
  line-height: 30px;
  font-size: 14px;
}
.classroprtnav a{
    display: inline-block;
    color: #8E96A4;
    margin-right:40px;
    font-size:14px;
    line-height:50px;
    border-bottom:solid 2px #fff
}
.classroprtnav a:hover,.classroprtnav a.hover{
    color:#1A48DB;
    border-bottom:solid 2px #1A48DB
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #B3B8C2
}
.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
  font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold
}
.titleContent{
    box-sizing: border-box;
    background:#fff;
    margin:14px auto 0;
    padding:0 24px;
}
.titleContent h3{
    border-bottom:solid 1px #eee;
    font-size:18px;
    color:#2A303B;
    padding:24px 0;
}
.titleContent >>> .el-dropdown{
    margin-right:20px;
    cursor: pointer;
    color:#8E96A4;
    font-size:14px;
}

.titleContent >>> .el-dropdown .el-dropdown-selfdefine:blur:active, .titleContent >>> .el-dropdown .el-dropdown-selfdefine:blur:not(.focusing){
    color:#1A48DB
}
>>> .el-dropdown .el-dropdown-selfdefine:focus:active, .el-dropdown .el-dropdown-selfdefine:focus:not(.focusing){
    color:#1A48DB;
    border-bottom:solid 2px #1A48DB;
    padding-bottom:20px;
}
>>> .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    background:rgba(26, 72, 219, .1);
    color:#1A48DB
}
</style>
